<head>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        position: relative;
    }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
  </body>
  <script>
    // https://blog.csdn.net/weixin_42981560/article/details/126648297
    let box = document.getElementsByClassName('box')[0];
    // 动画函数
    let num = 0;
    function animation() {
      if (num < 1000) {
        num++;
        box.style.left = num + 'px'
      } else {
        clearInterval(timer)  
      }
    }
    // 开启循环定时器
    let timer = setInterval(animation, 16.5);


    let box1 = document.getElementsByClassName('box')[1];
    // 动画函数
    let num1 = 0;
    function animation1() {
        if (num1 < 1000) {
            num1++;
            box1.style.left = num1 + 'px'
            // 请求动画帧，即屏幕刷新的时候执行回调函数
            requestAnimationFrame(animation1); // 继续执行该函数
        } else {
            cancelAnimationFrame(); // 清楚该函数
        }
    }
    
    let raID = requestAnimationFrame(animation1);
  </script>